<template>
  <div :class="'mui-row menuNav '+(is_iphoneX?'iphonex':'')">
    <ul class="mui-table-view">
      <li v-if="viewType != 'collect'">
        <div :class="'navcontent '+(collect_active ==1?'active':'')">
          <a href="javascript:;" @click.stop="collect_question($event)">
            <i class="bottom-tab-icon collect-icon"></i>
          </a>
        </div>
      </li>
      <li>
        <div :class="'navcontent '+(viewType == 'test'?'test':'')">
          <a
            href="javascript:;"
            v-if="viewType == '' || viewType == 'error'|| viewType == 'collect'|| viewType == 'note'"
            @click.stop="write_notes($event)"
          >
            <i class="bottom-tab-icon note-icon"></i>
          </a>
          <a href="javascript:;" v-if="viewType == 'test'">
            <template v-if="viewType == 'test'">{{time}}</template>
          </a>
        </div>
      </li>
      <li>
        <div :class="'navcontent '+(viewType == 'test'?'test':'')">
          <a href="javascript:;" v-if="viewType == ''" @click.stop="show_answer($event)">
            <i class="bottom-tab-icon look-icon"></i>
          </a>
          <a
            href="javascript:;"
            v-if="viewType == 'error'|| viewType == 'collect'|| viewType == 'note'"
            @click="remove_question($event)"
          >
            <i class="bottom-tab-icon remove-icon"></i>
          </a>
          <a href="javascript:;" v-if="viewType == 'test'" @click="hand_test">
            <template v-if="viewType == 'test'">交卷</template>
          </a>
        </div>
      </li>
    </ul>
  </div>
</template>
<script>
import { QuestionCollect, QuestionDeleteNote, QuestionDeleteError } from "../../api/api";
import { mapState } from 'vuex';
export default {
  props: {
    //显示类型
    viewType: {
      type: String,
      default: ""
    },
    // 倒计时
    time: {
      type: String,
      default: ""
    },
    // 当前题目id
    questionId: {
      type: Number,
      default: 0
    },
    // 题目是否收藏
    collectStatus: {
      type: Number,
      default: 0
    },
    //查看解析
    showAnswer:{
      type :Boolean,
      default : false
    }
  },
  data() {
    return {
      collect_active: this.collectStatus //题目是否收藏
    };
  },
  methods: {
    //收藏试题
    collect_question(event) {
      event.preventDefault();
      let data = {
        questionId: this.questionId
      };
      QuestionCollect(data).then(res => {
        console.log(res);
        if (res.code == 1) {
          if (res.data.status == 1) {
            this.collect_active = 1;
            this.$emit("is-question-collect", {
              questionId: this.questionId,
              value: 1
            });
          } else {
            this.collect_active = 0;
            this.$emit("is-question-collect", {
              questionId: this.questionId,
              value: 0
            });
          }
        }
      });
    },
    //打开笔记弹框
    write_notes(event) {
      event.preventDefault();
      this.$emit("open-note-modal", 1);
    },
    // 显示答案
    show_answer(event) {
      event.preventDefault();
      this.$emit("open-show-answer");
    },
    //删除题目
    remove_question(event) {
      event.preventDefault();
      this.$messageBox.close(false);
      this.$messageBox
        .confirm("", {
          message: "删除后无法进行修改",
          title: "是否确认删除该题",
          confirmButtonText: "立即删除",
          cancelButtonText: "再想一想"
        })
        .then(action => {
          if (action == "confirm") {
            //删除收藏
            if (this.viewType == "collect") {
              let data = {
                questionId: this.questionId
              };
              QuestionCollect(data)
                .then(res => {
                  console.log(res);
                  if (res.code == 1) {
                    if (res.data.status == 0) {
                      this.$toast("删除成功");
                      this.$emit("remove-collect", this.questionId);
                    }
                  } else {
                    this.$toast("删除失败");
                  }
                })
                .catch(err => {
                  this.$toast("删除失败");
                });
            }
            //删除收藏
            else if (this.viewType == "note") {
              let data = {
                questionId: this.questionId
              };
              QuestionDeleteNote(data)
                .then(res => {
                  console.log(res);
                  if (res.code == 1) {
                    this.$toast("删除成功");
                    this.$emit("remove-note", this.questionId);
                  } else {
                    this.$toast("删除失败");
                  }
                })
                .catch(err => {
                  this.$toast("删除失败");
                });
            }//删除收藏
            else if (this.viewType == "error") {
              console.log(1)
              let data = {
                questionId: this.questionId
              };
              QuestionDeleteError(data)
                .then(res => {
                  console.log(res);
                  if (res.code == 1) {
                    this.$toast("删除成功");
                    this.$emit("remove-error", this.questionId);
                  } else {
                    this.$toast("删除失败");
                  }
                })
                .catch(err => {
                  this.$toast("删除失败");
                });
            }
          }
        })
        .catch(err => {});
    },
    //交卷
    hand_test(){
      if(this.showAnswer){
        return ;
      }
      this.$messageBox.close(false);
      this.$messageBox
        .confirm("", {
          message: "确认提交之后将不能修改",
          title: "是否确认交卷？",
          confirmButtonText: "提交",
          cancelButtonText: "再检查下"
        })
        .then(action => {
          console.log(action);
          if (action == "confirm") {
            console.log(1)
            this.$emit('hand-test')
          }
        })
        .catch(err => {});
    }
  },
  watch: {
    //监测题目切换点赞状态切换
    collectStatus: {
      immediate: true,
      handler(val) {
        this.collect_active = val;
      }
    }
  },
  computed:{
    ...mapState(['is_iphoneX'])
  }
};
</script>
<style scoped lang="scss">
.menuNav {
  display: inline-block;
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 0.5rem;
  z-index: 102;
  background: #fff;
  box-shadow: 0 -0.01rem rgba(0, 0, 0, 0.1);
}

.menuNav.iphonex {
  height: 0.8rem;
  padding-bottom: 0.3rem;
}

.menuNav ul {
  display: flex;
  height: 100%;
}

.menuNav ul li {
  flex: 1 1 20%;
  height: 0.5rem;
}

.menuNav ul li .navcontent {
  width: 100%;
  height: 100%;
  text-align: center;
}

.menuNav ul li .navcontent a {
  float: left;
  width: 100%;
  height: 100%;
  padding-top: 0.05rem;
  display: flex;
  justify-content: space-around;
  flex-direction: column;
}

.menuNav ul li .navcontent a .bottom-tab-icon {
  height: 0.24rem;
  width: 0.24rem;
  display: block;
  margin: 0 auto;
}

.menuNav ul li .navcontent a span {
  float: left;
  width: 100%;
  text-align: center;
  color: rgba(41, 43, 51, 0.4);
  font-size: 0.12rem;
  line-height: 0.14rem;
}

.menuNav ul li .navcontent.active a span {
  color: #0486fe;
}
.menuNav {
  .navcontent {
    a {
      padding-top: 0 !important;

      .collect-icon {
        background: url("../../assets/images/star-icon.png") no-repeat center/cover;
      }

      .note-icon {
        background: url("../../assets/images/question-note-icon.png") no-repeat center/cover;
      }

      .look-icon {
        background: url("../../assets/images/look-list-icon.png") no-repeat center/cover;
      }

      .remove-icon {
        background: url("../../assets/images/big-remove-icon.png") no-repeat center/cover;
      }
    }
  }

  .navcontent.active {
    a {
      .collect-icon {
        background: url("../../assets/images/star-icon-2.png") no-repeat center/cover;
      }

      .look-icon {
        background: url("../../assets/images/look-list-icon-2.png") no-repeat center/cover;
      }
    }
  }

  .test {
    a {
      color: #0486fe;
      font-size: 0.16rem;
      line-height: 0.22rem;
    }
  }
}
</style>





